<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>时钟</title>
    <meta charset="UTF-8">
    <meta name="description" content="时钟">
    <meta name="author" content="邢栋">
    <link rel="icon" type="image/x-ico" href="icon192.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <script>/*@cc_on window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>
</head>

<body>
    <a href="https://github.com/xclala/clock">
        <img src="../../github.svg">
    </a>
    <header>
        <div class="day"></div>
        <!--星期-->
        <div class="clock">
            <!--时钟的表盘-->
            <div class="seconds"></div>
            <!--时钟的秒针-->
            <div class="minutes"></div>
            <!--时钟的分针-->
            <div class="hours"></div>
            <!--时钟的时针-->
            <div class="clock_center"></div>
            <!--时钟中间的圆-->
        </div>
        <div class="time"></div>
        <!--电子时间-->
    </header>
    <a href="index.html"><br>切换至电子钟</a>
    <style>
        html {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        * {
            margin: 0;
            padding: 0;
        }

        @media(prefers-color-scheme:dark) {
            body {
                background-color: rgb(35, 35, 35);
            }

            .day,
            .time {
                color: white;
            }
        }

        @media(prefers-color-scheme:light) {
            body {
                background-color: #ebe6e6;
            }

            .day,
            .time {
                color: black;
            }
        }

        body {
            height: 100vh;
        }

        header {
            width: 300px;
            height: 350px;
            /*让父元素居中*/
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .day,
        .time {
            /*星期和时间样式*/
            width: 100%;
            box-sizing: border-box;
            /*一些华丽花哨的让文字好看一点*/
            padding: 5px 10px;
            text-align: center;
            font-weight: 600;
            font-size: 30px;
        }

        .clock {
            margin: 5px auto;
            width: 250px;
            height: 250px;
            border-radius: 100%;
            background: lightblue;
            display: flex;
            justify-content: center;
        }

        .clock>div {
            /*时钟下div的通用设置*/
            position: absolute;
            /*让所有圆点在在圆心上*/
            bottom: 50%;
            border-radius: 50% 35% 0 0;
            transform-origin: bottom center;
        }

        .seconds {
            width: 4px;
            height: 110px;
            background: #777;
        }

        .minutes {
            width: 8px;
            height: 90px;
            background: orange;
        }

        .hours {
            width: 11px;
            height: 75px;
            background: pink;
        }

        div.clock_center {
            border-radius: 100%;
            width: 15px;
            height: 15px;
            background: #777;
            transform: translateY(50%);
        }

        a {
            text-decoration-line: none;
        }

        a:hover {
            font-weight: bolder;
        }
    </style>
    <script>
        window.onload = function () { //让js代码最后加载
            let thistime, s, h, m; //注册时间变量
            let roateS, roateH, roateM; //注册旋转变量
            const THISDAY = ['日', '一', '二', '三', '四', '五', '六']
            setInterval(() => { //每秒获取一次时间
                thistime = new Date();
                s = thistime.getSeconds();
                roateS = (s * 6); //秒每秒旋转度时
                m = thistime.getMinutes();
                roateM = (m * 6) + (s / 10); //分每秒旋转度时
                //让分钟慢慢走，所以加上了秒/10，秒钟跳着走
                h = thistime.getHours();
                //小时一圈可不是360度
                roateH = (h % 12 * 30) + (m / 2);
                document.querySelector('.seconds').style.transform = `rotate(${roateS}deg)`;
                document.querySelector('.minutes').style.transform = `rotate(${roateM}deg)`;
                document.querySelector('.hours').style.transform = `rotate(${roateH}deg)`;
                document.querySelector('.day').innerHTML = "星期" + THISDAY[thistime.getDay()];
                //显示当前的星期
                document.querySelector('.time').innerHTML = `${show(h)}:${show(m)}:${show(s)}`
                //显示当前的时间

            }, 1000);

            function show(newtime) { //让位数永远保持两位     
                return newtime > 9 ? newtime : "0" + newtime;
            }
        }
    </script>
</body>

</html>